<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Ежедневный отчет</title>
  <link rel="icon" href="/image/logo2.jpg" type="image/x-icon">
  <link rel="shortcut icon" href="/image/logo2.jpg" type="image/x-icon">
  <link rel="stylesheet" th:href="@{/main.css}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div th:replace="~{layouts/header :: header}"></div>

<main class="container">

  <form th:action="@{/dailyprofit/add}" method="post" id="form">
    <h1>Формирование ежедневного отчета</h1>
    <input type="date" name="date" placeholder="Введите дату">
    <input type="text" name="services" placeholder="Введите оказанные услуги">
    <input type="number" name="profit" placeholder="Введите сумму прибыли">


    <select name="ordersExit" type="text" id="option" class="option">
      <option class="option">Выберите затраченый товар</option>
      <div th:each="el : ${orders}">
        <option class="option" th:value="${el.getId()}" th:text="'Код товара:  ' + ${el.getCode()}"/>
      </div>
    </select>
    <h3 th:text="${error}" style="color: red"/>

    <button>Добавить</button>

    <div th:each="el : ${list}">
      <div id="report">
          <h1 th:text="'Дата формирования: ' + ${el.date}"/>
          <h3 th:text="'Оказанные услуги: ' + ${el.services}"/>
          <h3 th:text="'Прибыль: ' + ${el.profit}"/>
          <h3 th:text="'Затраченные товары: ' + ${el.code}"/>
      </div>
    </div>
  </form>
  <script>
    function toggleCheckbox(checkboxId) {
      var checkbox = document.getElementById(checkboxId);
      checkbox.checked = !checkbox.checked;
    }
  </script>
</main>

<div th:replace="~{layouts/footer :: footer}"></div>

</body>
</html>